<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="exportExcelFile">导出</el-button>
    <el-button type="primary" size="small" @click="showImportExcelDialog">导入</el-button>
  </div>
<!--  导入对话框-->
  <el-dialog v-model="dialogImportVisible" title="导入" width="30%">
    <el-form label-width="120px">
      <el-form-item label="分类文件">
        <el-upload
            class="upload-demo"
            action="http://localhost:8501/admin/product/category/uploadExcel"
            :on-success="onUploadSuccess"
            :headers="headers"
        >
<!--          直接通过action向后端接口发出请求-->
          <el-button type="primary">上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!---懒加载的树形表格-->
  <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="fetchData"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="name" label="分类名称"/>
    <el-table-column prop="imageUrl" label="图标" #default="scope">
      <img :src="scope.row.imageUrl" width="50"/>
    </el-table-column>
    <el-table-column prop="orderNum" label="排序"/>
    <el-table-column prop="status" label="状态" #default="scope">
      {{ scope.row.status == 1 ? '正常' : '停用' }}
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"/>
  </el-table>

</template>

<script setup>
import {ref, onMounted} from 'vue';
import {getCategoryListByParentId, exportExcel} from '@/api/category'
import {useApp} from "@/pinia/modules/app";
import {ElMessage} from "element-plus";

//  控制对话框是否展示
const dialogImportVisible=ref(false);

//点击导入后显示导入对话框
const showImportExcelDialog=()=>{
  dialogImportVisible.value=true;
}

//上传成功的回掉函数, 关闭对话框
const onUploadSuccess=async(resp)=>{
  const {code}=resp
  if(code===200){
    dialogImportVisible.value=false
    ElMessage.success("上传成功")
    //刷新数据
    //进入后查询一级标题
    const {data} = await getCategoryListByParentId(0)
    //赋值
    list.value = data
  }
}


// 带着请求头过去, 里面有我们认证的token
const  headers=ref({
  token:useApp().authorization.token
})

//点击导出后,开始执行方法
const exportExcelFile = async () => {
  // exportExcel() 可能是一个异步函数，返回一个 Promise。
  //.then((resp => { })) 监听 Promise 的成功状态，但回调函数中没有任何操作。
  exportExcel().then((resp => {
    //创建blob对象
    let blob = new Blob([resp]);
    //创建a标签
    const link = document.createElement("a");
    //赋值数据
    link.href=window.URL.createObjectURL(blob);
    //设置名称
    link.download="分类数据.xlsx"
    //模拟点击
    link.click()
  }))
}
// 定义list属性模型
const list = ref([])
onMounted(async () => {
  //进入后查询一级标题
  const {data} = await getCategoryListByParentId(0)
  //赋值
  list.value = data
})


// 加载数据的方法
const fetchData = async (row, treeNode, resolve) => {

  // console.log(row.id)
  let parentId = row.id;
  // 向后端发送请求获取数据
  const {data} = await getCategoryListByParentId(parentId)
  // 返回数据
  resolve(data)

}

</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>